<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>维修库商品打印标签模板</title>
    <meta charset="UTF-8"></meta>
    <style>        body, html {
        margin: 0;
        padding: 0;
        width: 70mm;
        height: 70mm;
        font-family: 'SimSun', sans-serif; /* 防止生成的PDF中文不显示 */
    }

    h1 {
        text-align: center;
        font-size: 12px;
        line-height: 1.5;
    }

    p {
        font-size: 12px;
        margin: 3px 0;
    }

    .device-code {
        display: flex; /* 使用Flexbox布局 */
        align-items: center; /* 垂直居中对齐 */
    }

    .sn-container {
        display: inline-flex; /* 内联Flexbox容器 */
        align-items: center; /* 垂直居中对齐 */
        margin-left: 2px; /* 与“设备码：”之间的间距 */
    }

    .sn-image {
        width: auto; /* 图片宽度自适应 */
    }

    .sn-text {
        margin-top: 5px; /* 文本与图片之间的间距 */
        text-align: center; /* 文字居中 */
    }

    img {
        vertical-align: middle;
        display: inline-block;
    }
    </style>
</head>
<body>
<div>
    <h1>
        <img th:src="${zlbcImage}" alt="Image" style="height:30px;"></img>智慧停车
    </h1>
    <p th:text="${createTime != null ? '入库日期：'+ createTime : '入库日期：未知'}"></p>
    <p th:text="${materialName != null ? '名&nbsp;&nbsp;&nbsp;&nbsp;称：'+ materialName : '名称：未知'}"></p>
    <p th:text="${supplierName != null ? '客&nbsp;&nbsp;&nbsp;&nbsp;户：'+ supplierName : '客户：未知'}"></p>
    <p class="device-code">
        设&nbsp;备&nbsp;码：
        <span class="sn-container">
        <img class="sn-image" th:src="${sequencesNumberImage}" alt="Image"/>
        <div class="sn-text" th:text="${sequencesNumber}">${sequencesNumber}</div>
    </span>
    </p>
</div>
</body>
</html>
